<template>
  <div ref='wrap'>
    <span class='iconfont icon-remove_circle_outline' @click="removeNum"> </span>
    <i>{{num}}</i>
    <span class='iconfont icon-add_circle add' @click="addNum">
      <i class='yuan' v-show='isyuan' ref='yuan'></i>
    </span>
  </div>
</template>
<script>

  export default {

    // tips:单价数组
    props: ['tips'],
    data() {
      return {
        num: 0,
        allMuch: 0,
        muchId: 0,
        isyuan:false,
        yuan:0
      }
    },

    methods: {
      addNum(event) {
        if (!event._constructed) { //如果不存在这个属性,则不执行下面的函数
          return;
        }
        this.num++;
       let allNum =1;
        this.muchId = this.$refs.wrap.id

        this.allMuch = this.tips[this.muchId]
        this.yuan = this.$refs.yuan
        this.$emit('send', this.allMuch,allNum,this.yuan)
       


      },
      removeNum() {
        if (!event._constructed) { //如果不存在这个属性,则不执行下面的函数
          return;
        }
        if (this.num <= 0)return;
         
        if (this.num == 1) this.isyuan =false;
        this.num--;
        let allNum = -1
        this.muchId = this.$refs.wrap.id
        this.allMuch = -this.tips[this.muchId]
        console.log(this.allMuch)
        this.$emit('send', this.allMuch,allNum)
      },


    }
  }

</script>
<style scoped>
  div {
    float: right;
    line-height: 60px;
  }
  
  span {
    float: left;
    color: #00a0dc;
    font-size: 20px;
  }
  
  div i {
    font-style: normal;
    float: left;
    padding: 0 10px 0 10px;
    color: #93999f;
  }
  .add{
    position: relative;
  }
  .yuan{
   position: absolute;
   right:0;
   top:20px;
   z-index: 10;
    height: 20px;
    background: orange;
    border-radius:50%;
  }

</style>
